<template>
    <div class="mainInput">
        <input type="text" class="add-input" placeholder="接下去要做什么?" autofocus="autofocus" @keyup.enter="addtodo">
    </div>
</template>
<script>
let id = 0;
export default {
  data() {
    return {
      todoValue: {
        id: id,
        content: "",
        completed: false
      }
    };
  },
  methods: {
    addtodo(e) {
      id++;
      this.todoValue = {
        id: id,
        content: e.target.value.trim(),
        completed: false
      };
      this.$emit("transmit", this.todoValue);
      e.target.value = "";
    }
  }
};
</script>
<style lang="scss" scoped>
@import "@/assets/styles/normal.scss";
.mainInput {
  background-color: #fff;
  @include flexCol;
  padding: 30px 50px;
  width: 80%;
}
.mainInput input {
  color: #666;
  font-size: 25px;
  line-height: 40px;
  width: 60%;
  border: 0;
}
.mainInput input::placeholder {
  color: #ccc;
}
</style>

